<template>
    <PageContainer title="查看班级">
        <!-- 内容插槽 页面主元素的展示 -->

        <!-- 搜索组件 status-icon显示校验反馈图标 rules绑定校验规则 -->
        <el-form inline :model="viewCollege" ref="viewCollege">
            <el-form-item label="学院:" prop="collegeId">
                <CollegeSelect v-model="viewCollege.collegeId" />
            </el-form-item>
            <el-form-item label="班级:" prop="major">
                <el-input type="text" v-model="viewCollege.major" placeholder="请输入班级关键词" autocomplete="off" />
            </el-form-item>
            <el-form-item>
                <el-button @click="searchForm()" type="primary">搜索</el-button>
                <el-button @click="resetForm('viewCollege')">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 数据展示 -->
        <el-table :data="dataList" v-loading="loading">
            <el-table-column label="班级号" prop="id" />
            <el-table-column label="班级" prop="major" />
            <el-table-column label="学院" prop="college" />
            <el-table-column label="操作">
              <!-- 利用作用域插槽 row 可以获取当前行的数据 -->
                <template #default="{ row }">
                    <el-button circle plain type="primary" icon="el-icon-edit" @click="editUser(row)" />
                    <el-button circle plain type="danger" icon="el-icon-delete" @click="deleteUser(row)" />
                </template>
            </el-table-column>
        </el-table>

        <!-- 编辑班级组件 侧边栏 子组件编辑成功会通知父组件 调用successEdit更新页面 -->
        <EditMajor ref="editCollege" @successEdit="getDataList" :identify="viewCollege.identify" />

        <!-- 分页组件 -->
        <!-- current-page当前页数 page-size每页显示条目个数 page-sizes每页显示个数选择器的选项设置 -->
        <el-pagination :current-page="viewCollege.pageNum" :page-size="viewCollege.pageSize" :page-sizes="[2, 3, 5]"
            :background="true" layout="jumper, total, sizes, prev, pager, next" :total="total" @size-change="sizeChange"
            @current-change="currentChange" style="margin-top: 20px; float:right" />
    </PageContainer>
</template>

<script>
import PageContainer from '@/components/PageContainer'
import CollegeSelect from '@/components/CollegeSelect'
import EditMajor from './EditMajor.vue'
import { getDataList, deleteMajor } from '@/api/college'

export default {
  name: 'viewCollegePage', // 查看班级页面
  components: {
    PageContainer,
    CollegeSelect,
    EditMajor
  },
  async created () {
    this.getDataList() // 创建页面后获取班级数据
  },
  data () {
    return {
      loading: false, // 加载效果 取消显示加载效果true
      // 存放搜索数据的条件
      viewCollege: {
        pageNum: 1, // 当前页
        pageSize: 5, // 当前生效的每页条数
        collegeId: '',
        major: '',
        identify: '班级'
      },
      total: 0, // 总条数
      dataList: [] // 存放获取到的班级数据
    }
  },
  methods: {
    // 获取班级数据
    async getDataList () {
      this.loading = true
      // 根据搜索数据的条件获取数据
      const { data: { data } } = await getDataList(this.viewCollege)
      this.dataList = data.records
      this.total = data.total
      this.loading = false
    },
    // 提交表单 发送请求
    searchForm () {
      this.viewCollege.pageNum = 1 // 重置页面
      this.getDataList()
    },
    // 重置表单
    resetForm (viewCollege) {
      this.$refs[viewCollege].resetFields()
      // resetFields()方法会把所有数据都清空 需要额外手动赋值一些初始数据
      this.viewCollege = { pageNum: 1, pageSize: 5, identify: '班级' }
      this.getDataList()
    },
    // 编辑班级信息
    editUser (row) {
      // 调用EditUser组件的openDrawer()方法显示drawer 并把每行的数据row传入进去
      this.$refs.editCollege.openDrawer(row)
    },
    // 删除班级信息
    deleteUser (row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await deleteMajor(row.id)
        this.$message.success('删除成功')
        this.getDataList() // 删除成功后重新更新页面
      }).catch(() => { }) // 取消后不行任何逻辑操作 但必须写catch
    },
    // 分页数变化
    sizeChange (size) {
      this.viewCollege.pageNum = 1
      this.viewCollege.pageSize = size
      this.getDataList()
    },
    // 页数变化
    currentChange (page) {
      this.viewCollege.pageNum = page
      this.getDataList()
    }
  }
}
</script>

<style></style>
